<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div class="cropper-box" style="width: 500px;height: 500px">
      <vue-cropper ref="cropper" :img="option.img" :output-size="option.size" :output-type="option.outputType"
        :info="true" :full="option.full" :can-move="option.canMove" :can-move-box="option.canMoveBox"
        :fixed-box="option.fixedBox" :original="option.original" :auto-crop="option.autoCrop"
        :auto-crop-width="option.autoCropWidth" :auto-crop-height="option.autoCropHeight" :center-box="option.centerBox"
        @real-time="realTime" :high="option.high" @img-load="imgLoad" mode="cover"></vue-cropper>
    </div>
    <div class="upload">
      <el-button type="primary" @click="clicks">主要按钮</el-button>
      <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"
        accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
    </div>
  </div>
  
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.min.js"></script>
  <script>
    Vue.use(window['vue-cropper'])
    var arr = new Vue({
      el: '#app',
      data: {
        flieState: false,
        option: {
          img: './ssss.jpg',
          size: 1,
          full: false,
          outputType: 'png',
          canMove: true,
          // fixedBox为true就不能改变裁剪框
          fixedBox: false,
          original: false,
          canMoveBox: true,
          autoCrop: true,
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 200,
          autoCropHeight: 150,
          centerBox: false,
          high: true
        }
      },
      methods: {
        clicks(){
          document.getElementById('uploads').click()
        },
        imgLoad(msg) {
          console.log(msg)
        },
        realTime(data) {
          this.previews = data
          console.log(data)
        },
        uploadImg(e, num) {
          //上传图片
          // this.option.img
          var file = e.target.files[0]
          if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
            alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
            return false
          }
          var reader = new FileReader()
          reader.onload = (e) => {
            let data
            if (typeof e.target.result === 'object') {
              // 把Array Buffer转化为blob 如果是base64不需要
              data = window.URL.createObjectURL(new Blob([e.target.result]))
            } else {
              data = e.target.result
            }
            if (num === 1) {
              this.option.img = data
            } else if (num === 2) {
              this.example2.img = data
            }
          }
          // 转化为base64
          // reader.readAsDataURL(file)
          // 转化为blob
          reader.readAsArrayBuffer(file)
        },
      }
    })
  </script>
</body>

</html>